{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{% if object %}编辑主机{% else %}添加主机{% endif %}</title>
    <link href="{% static 'layui.css' %}" rel="stylesheet">
    <script src="{% static 'layui.js' %}"></script>
    <script src="{% static 'jquery-3.6.0.min.js' %}"></script>
</head>
<body>
<div class="layui-container" style="padding: 20px; max-width: 600px;">
    <h2 class="layui-header">{% if object %}编辑主机{% else %}添加主机{% endif %}</h2>

    <form class="layui-form layui-form-pane" method="post">
        {% csrf_token %}

        <div class="layui-form-item">
            <label class="layui-form-label">主机名</label>
            <div class="layui-input-block">
                <input type="text" name="hostname" lay-verify="required" placeholder="请输入主机名"
                       value="{{ object.hostname|default_if_none:'' }}" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">IP地址</label>
            <div class="layui-input-block">
                <input type="text" name="ip" lay-verify="required|ip" placeholder="请输入IP地址"
                       value="{{ object.ip|default_if_none:'' }}" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">端口</label>
            <div class="layui-input-block">
                <input type="number" name="port" lay-verify="required|number|port" placeholder="请输入端口号"
                       value="{{ object.port|default_if_none:'22' }}" min="1" max="65535" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="required " placeholder="请输入用户名"
                       value="{{ object.username|default_if_none:'' }}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">SSH密码</label>
            <div class="layui-input-block">
                <input type="password" name="ssh_password" lay-verify="required ssh_password" placeholder="请输入SSH密码"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">提权密码</label>
            <div class="layui-input-block">
                <input type="password" name="become_password" placeholder="请输入提权密码（可选）"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block" style="float: right;">
                <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
                {#                <a class="layui-btn layui-btn-primary" href="{% url 'host_manager:go_host_manager' %}">取消</a>#}
            </div>
        </div>
    </form>
</div>


<script>

    layui.use(['form', 'jquery'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        // 监听表单提交
        form.on('submit(formDemo)', function (data) {
            // 获取表单数据
            var formData = data.field; // 自动包含 CSRF token
            {#var field = data.field;#}
            var url = '{% url 'host_manager:host_create' %}';

            {% if object %}
                formData['pk'] = {{ object.pk }};
            {% endif %}
            // 发起 AJAX 请求
            $.ajax({
                url: url,  // 表单的 action
                type: "POST", // 表单的 method（POST）
                data: formData,
                dataType: 'json',
                success: function (res) {
                    // 成功后关闭弹窗
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                    parent.layer.msg('保存成功', {time: 800})

                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseJSON.message)
                    layer.msg(xhr.responseJSON.message, {icon: 0})

                }
            });

            return false; // 阻止表单默认提交
        });
        // 自定义 IP 校验规则（可选）
        form.verify({
            ip: function (value) {
                if (!/^(\d{1,3}\.){3}\d{1,3}$/.test(value)) {
                    return '请输入正确的IP地址';
                }
            },
            port: function (value) {
                // 正则：必须是1到5位的数字
                if (!/^\d{1,5}$/.test(value)) {
                    return '请输入合法的端口号（1-65535）';
                }

                // 转换为整数
                const port = parseInt(value, 10);

                // 判断范围
                if (port < 1 || port > 65535) {
                    return '端口号必须在 1 到 65535 之间';
                }

            },
            ssh_password: function (value) {
                if (!value) {
                    return 'SSH密码不能为空';
                }
            }
        });
    });
</script>

</body>
</html>